<template>
  <div id="addPoster">
    <el-row type="flex" justiify="center">
      <el-col :span="12" :offset="0">
        <h1 class="con-right-title">{{ title }}</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="1">
        <el-form
          ref="activityInfo"
          label-width="120px"
          :model="activityInfo"
          :rules="activityInfoRules"
        >
          <el-form-item label="活动名称" prop="activityName">
            <el-input
              type="text"
              size="small"
              :maxlength="20"
              show-word-limit
              @change="changeName"
              :disabled="isEditDisalbed"
              :clearable="true"
              v-model.trim="activityInfo.activityName"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="15" :offset="1">
        <el-form
          ref="activityInfo"
          label-width="120px"
          :model="activityInfo"
          :rules="activityInfoRules"
        >
          <!-- <el-form-item label="展翅入量渠道" prop="intakeChannels">
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              :disabled="isEditDisalbed"
            >
              <el-table-column prop="name" label="学院" width="180">
              </el-table-column>
              <el-table-column
                prop="firstName"
                label="一级渠道名称"
                width="180"
              >
                <template>
                  海报转介绍
                </template>
              </el-table-column>
              <el-table-column prop="secondChannel" label="选择二级渠道">
                <template slot-scope="scope">
                  <el-checkbox
                    :disabled="isEditDisalbed"
                    v-model="item.selected"
                    v-for="(item, index) in scope.row.secondChannel"
                    :key="index"
                    @change="
                      (value) => {
                        selectBox(value, scope.row, scope.$index, item, index)
                      }
                    "
                    >{{ item.name }}</el-checkbox
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form-item> -->
          <el-form-item label="展翅匹配的入量渠道名称：" label-width="200px" prop="inviteMatchingChannel.oneLevelChannelId">
            <el-select v-model="activityInfo.inviteMatchingChannel.oneLevelChannelId" :disabled="isEditDisalbed">
              <el-option
                v-for="item in introduceChannelListOne" 
                :key="item.channelCode"
                :label="item.firstChannelName"
                :value="item.channelCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="addPoster-channel" label="" label-width="200px" prop="inviteMatchingChannel.twoLevelChannelName">
             <el-input
              class="addPoster-channel-input"
              size="medium"
              :disabled="isEditDisalbed"
              v-model="activityInfo.inviteMatchingChannel.twoLevelChannelName"
              @change="getChannelVerificationList"
              placeholder="请您输入二级渠道名称"/>
              <template v-if="showshowChannelIconAll">
                <i class="el-icon-check addPoster-channel-icon addPoster-channel-icon-open" v-if="showChannelIcon"></i>
                <i class="el-icon-close addPoster-channel-icon" v-else></i>
              </template>
          </el-form-item>
          <p class="addPoster-p">请您输入二级渠道名称前缀（例如新年活动-国画H5，就输入新年活动即可）</p>
          <el-form-item label="活动起止时间" prop="activityTime">
            <el-date-picker
              v-model="activityInfo.activityTime"
              type="datetimerange"
              :disabled="isEditDisalbed"
              size="small"
              :clearable="false"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动缩略图" prop="thumbnail">
            <uploadSingImg
              :imgUrl="activityInfo.thumbnail"
              accept=".jpg,.jpeg,.png,.gif"
              :maxSize="0.5"
              @getImgUrl="getActivityThumbnail"
            >
              <template v-slot:imgInfo>
                <span>(建议上传图片尺寸640*320像素，小于500KB)</span>
              </template>
            </uploadSingImg>
          </el-form-item>
          <el-form-item label="活动海报" prop="activityPoster">
            <uploadSingImg
              :imgUrl="activityInfo.activityPoster"
              accept=".jpg,.png"
              :maxSize="10"
              @getImgUrl="getActivityPoster"
            >
              <template v-slot:imgInfo>
                <span
                  >（建议上传图片尺寸宽750px，高不低于1624px，png
                  jpg格式，尺寸最大10M）</span
                >
              </template>
            </uploadSingImg>
          </el-form-item>
        </el-form>
        <el-form
          ref="activityInfo"
          label-width="120px"
          :model="activityInfo"
          :rules="activityInfoRules"
        >
          <el-form-item label="海报模板素材" prop="posterTemplate">
            <div class="section-poster">
              <el-button type="primary" class="add-section" @click="addSection"
                >+新增海报模板</el-button
              >
            </div>
          </el-form-item>
          <div class="poster-template">
            <template v-if="posterTemplateMaterial.length">
              <div v-for="(item, index) in posterTemplateMaterial" :key="index">
                <div class="poster-pic">
                  <uploadSmallImg
                    :index="index"
                    :imgUrl="item.templateImg"
                    accept=".jpg,.jpeg,.png,.gif"
                    :maxSize="5"
                    @getImgUrl="getPosterTemplate"
                  >
                    <template v-slot:imgInfo>
                      <span
                        >（建议上传图片尺寸宽750，高度不限，支持gif，尺寸最大5M）</span
                      >
                    </template>
                  </uploadSmallImg>
                </div>
                <div class="delbtn">
                  <el-button
                    v-if="index > 0"
                    size="small"
                    type="danger"
                    icon="el-icon-delete"
                    @click="delTemplate(index)"
                    >删除</el-button
                  >
                </div>
                <div class="set-time">
                  设置上下架时间：
                  <template>
                    <el-radio v-model="item.upDownFrameStatus" label="CLOSE"
                      >否</el-radio
                    >
                    <el-radio v-model="item.upDownFrameStatus" label="OPEN"
                      >是</el-radio
                    >
                  </template>
                  <div
                    class="select-time"
                    v-if="item.upDownFrameStatus == 'OPEN'"
                  >
                    <el-date-picker
                      v-model="item.setTime"
                      type="datetimerange"
                      size="small"
                      :clearable="false"
                      :picker-options="pickerOptions"
                      @change="selectTime(item, index)"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                  </div>
                  <div class="sorting-box">
                    <div class="sorting">排序：</div>
                    <el-input
                      class="activity-input"
                      size="small"
                      @change="sortInput(item, index)"
                      v-model.trim="item.sortNum"
                    ></el-input>
                  </div>
                  <div class="tip">设置海报的排序，数字越小排序越靠前</div>
                  <div class="poster-share">
                    <div class="share-text">
                      <span>海报分享语：</span>
                      <span>{{ item.shareSign }}</span>
                    </div>
                    <div class="delshare">
                      <el-button
                        v-if="item.shareSign !== '暂无'"
                        size="small"
                        type="danger"
                        icon="el-icon-delete"
                        @click="delShare(item)"
                        >删除</el-button
                      >
                    </div>
                  </div>
                  <div class="add-share">
                    <el-button
                      type="primary"
                      class="add-section"
                      @click="addShare(item)"
                      >+新增分享语</el-button
                    >
                  </div>
                </div>
              </div>
            </template>
          </div>
          <el-form-item label="活动按钮" prop="activityBtn">
            <div class="active-btn">
              <span>新增上传作品按钮</span>
              <div class="up-pic">
                <uploadSingImg
                  :imgUrl="activityInfo.uploadWorksButton"
                  accept=".png"
                  :maxSize="0.5"
                  @getImgUrl="getWorksBtn"
                >
                  <template v-slot:imgInfo>
                    <span>请您上传png格式图片</span>
                  </template>
                </uploadSingImg>
              </div>
              <div class="delbtn">
                <el-button
                  v-if="activityInfo.uploadWorksButton"
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  @click="delWorksBtn"
                  >删除</el-button
                >
              </div>
            </div>
            <div class="active-btn">
              <span>新增集赞按钮</span>
              <div class="collection-pic">
                <uploadSingImg
                  :imgUrl="activityInfo.praiseButton"
                  accept=".png"
                  :maxSize="0.5"
                  @getImgUrl="getCollectionPraiseBtn"
                >
                  <template v-slot:imgInfo>
                    <span>请您上传png格式图片</span>
                  </template>
                </uploadSingImg>
              </div>
              <div class="delbtn">
                <el-button
                  v-if="activityInfo.praiseButton"
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  @click="delPraiseBtn"
                  >删除</el-button
                >
              </div>
            </div>
          </el-form-item>
          <el-form-item label="活动规则" prop="activityRules">
            <template>
              <el-radio v-model="activityInfo.ruleStatus" label="CLOSE"
                >否</el-radio
              >
              <el-radio v-model="activityInfo.ruleStatus" label="OPEN"
                >是</el-radio
              >
            </template>
            <div
              class="quill-box"
              style="width: 100% "
              v-if="activityInfo.ruleStatus == 'OPEN'"
            >
              <quill-editor
                ref="text"
                style="height: auto"
                v-model="activityInfo.ruleContent"
                class="myQuillEditor"
                :options="editorOption"
                @change="onEditorChange($event)"
                @blur="onEditorBlur($event)"
              ></quill-editor>
              <div class="limit">
                <span>{{ nowLength }}</span> / {{ maxLen }}
              </div>
              <div v-if="overText" class="red-note">
                内容不超过{{ maxLen }}字
              </div>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 提交 -->
    <div class="submit-wrap">
      <el-button @click="onCancel" class="award-remove_btn" size="medium"
        >取消</el-button
      >
      <el-button
        type="primary"
        class="award-remove_btn"
        size="medium"
        @click="onSubmit"
        >保存</el-button
      >
    </div>
    <dialogUploadImg
      :dialogData="dialogUpData"
      @setImgInfo="setImgInfo"
      v-if="dialogUpData.isShow"
    ></dialogUploadImg>
    <el-dialog :visible.sync="dialogFormVisible" v-if="dialogShare.isShow">
      <el-input
        show-word-limit
        v-model.trim="form.name"
        :maxlength="100"
        autocomplete="off"
      ></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dialogUploadImg from '@component/readManagement/readMine/dialogUploadImg'
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件
import uploadSmallImg from '@common/uploadSmallImg' // 上传单个图片公共组件
import { quillEditor } from 'vue-quill-editor'
import { clearTagMixins } from '@/mixins/clearTag'
import {
  getPostersName,
  getPostersChannels,
  addPoster,
  changePoster,
  getPosterDetail,
  getIntroduceChannelList,
  getChannelverification
} from '@/api/activePull/adviserList/index'
export default {
  mixins: [clearTagMixins],
  components: {
    uploadSingImg,
    uploadSmallImg,
    quillEditor,
    dialogUploadImg
  },
  data() {
    return {
      title: '', //标题
      dialogFormVisible: false,
      introduceChannelListOne: [], //一级入量渠道
      secondaryChannel: [], //二级渠道
      showChannelIcon: false, //二级渠道是否正确
      showshowChannelIconAll: false, //是否显示渠道图标
      dialogShare: {
        isShow: false
      },
      form: {
        name: '' //分享语
      },
      shareLanguage: '',
      postId: '', //编辑or复制活动id
      repeatName: '', // 活动名称是否重复
      activityInfo: {
        activityId: '', //活动id
        activityName: '', //名称
        activityTime: [], // 活动时间
        inviteMatchingChannel: { //展翅匹配入量渠道
          oneLevelChannelId: "xgtj",
          twoLevelChannelName: ""
        },
        activityStartTime: '', // 活动开始时间
        activityEndTime: '', // 活动结束时间
        thumbnail: '', //活动缩略图
        activityPoster: '', // 活动海报
        posterTemplate: '', // 海报模板素材
        uploadWorksButton: '', //上传作品按钮
        praiseButton: '', //集赞按钮URL
        ruleContent: '', // 活动规则内容
        textContent: '', //纯文本
        ruleStatus: 'CLOSE' //规则开启状态
      },
      posterTemplateMaterial: [
        {
          templateImg: '', //海报素材模板图片
          upDownFrameStatus: 'CLOSE', //是否开启状态
          setTime: [], //上下架时间
          upFrameTime: '', //上架时间
          downFrameTime: '', //下架时间
          sortNum: '', //排序号
          shareSign: '暂无' //分享语
        }
      ],
      channels: [],
      isSelect: null,
      selected: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      isCheck: false, //是否查看
      editorIndex: 0, //编辑器光标位置
      nowLength: 0,
      maxLen: 500,
      overText: false, //富文本字数是否超过500
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              [{ header: 1 }, { header: 2 }],
              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ color: [] }, { background: [] }],
              [{ align: [] }],
              ['image']
            ],
            handlers: {
              image: (value) => {
                if (value) {
                  // 在这里编写图片按钮点击操作
                  let quill = this.$refs.text.quill
                  this.editorIndex = quill.getSelection()
                    ? quill.getSelection().index
                    : 0
                  this.dialogUpData.isShow = true
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          },
          clipboard: {
            matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]]
          }
        },
        placeholder: '请输入正文'
      },
      dialogUpData: {
        isShow: false
      },
      tableData: [],
      activityInfoRules: {
        activityName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { max: 20, message: '长度不能大于20个字符', trigger: 'blur' }
        ],
        // intakeChannels: [
        //   { required: true, message: '请选择二级渠道', trigger: 'change' }
        // ],
        activityTime: [
          {
            required: true,
            message: '活动起止时间不能为空',
            trigger: 'blur'
          }
        ],
        activityPoster: [
          { required: true, message: '活动海报不能为空', trigger: 'blur' }
        ],
        posterTemplate: [
          { required: true, message: '活动模板素材不能为空', trigger: 'blur' }
        ],
        activityBtn: [
          {
            required: true,
            message: '一个按钮只能设置一个图片',
            trigger: 'blur'
          }
        ],
        'inviteMatchingChannel.oneLevelChannelId': [
          {required: true, message: '一级渠道不能为空', trigger: 'blur'}
        ],
        'inviteMatchingChannel.twoLevelChannelName': [
          {required: true, message: '请您输入展翅中二级渠道名称前缀进行匹配', trigger: 'blur'}
        ]
      },
      activityStatus: ''
    }
  },
  computed: {
    isEditDisalbed() {
      if (this.$route.query.type == 'edit') {
        return this.activityInfo.activityStatus === 'ONGOING'
      }
    }
  },
  created() {
    // this.getChannels()
    this.getIntroduceChannelListOne()
    if (this.$route.query.type == 'edit' || this.$route.query.type == 'copy') {
      this.postId = this.$route.query.id
      this.searchActive()
      this.showChannelIcon = true
      this.showshowChannelIconAll = false
    }
    if (this.$route.query.type == 'edit') {
      this.title = '编辑活动'
    } else {
      this.title = '新增活动'
      this.showChannelIcon = true
      this.showshowChannelIconAll = false
    }
  },
  methods: {
    //活动名称去重
    changeName(val) {
      if (this.activityDetailName === val || val.length === 0) return false
      getPostersName(val, (res) => {
        this.repeatName = res
        if (res) {
          this.$message.error('活动名称重复!!!请重新填写或修改')
        }
      })
    },
    //获取一级入量渠道
    async getIntroduceChannelListOne() {
     await getIntroduceChannelList((res) => {
        this.introduceChannelListOne = res
      })
    },
    //二级渠道校验
    getChannelVerificationList() {
      this.showshowChannelIconAll = true
      if (this.activityInfo.inviteMatchingChannel.oneLevelChannelId !== '') {
        let params = {channelCode:this.activityInfo.inviteMatchingChannel.oneLevelChannelId, secondChannelName: this.activityInfo.inviteMatchingChannel.twoLevelChannelName }
        getChannelverification(
          params,
          (response)=>{
            this.showChannelIcon = response
          }
        )
      }
    },
    // 获取展翅入量渠道
    // getChannels() {
    //   getPostersChannels((res) => {
    //     // this.tableData = res
    //     this.channels = res
    //   })
    // },
    // 活动缩略图
    getActivityThumbnail(url) {
      this.$set(this.activityInfo, 'thumbnail', url)
    },
    // 活动海报
    getActivityPoster(url) {
      this.$nextTick(() => {
        this.activityInfo.activityPoster = url
      })
    },
    // 海报模板素材
    getPosterTemplate(data) {
      let { index, url } = data
      this.$nextTick(() => {
        this.posterTemplateMaterial[index].templateImg = url
        this.activityInfoRules.posterTemplate = url
      })
    },
    // 新增海报模板素材
    addSection() {
      if (this.posterTemplateMaterial.length == 10) {
        this.$message({
          message: '最多添加10条档位',
          type: 'warning'
        })
        return false
      }
      this.posterTemplateMaterial.push({
        templateImg: '', //海报素材模板图片
        upDownFrameStatus: 'CLOSE', //是否开启状态
        setTime: [], //上下架时间
        sortNum: '', //排序号
        shareSign: '暂无' //分享语
      })
    },
    // 打开新增分享语弹框
    addShare(item) {
      if (item.shareSign !== '暂无') {
        this.$message.warning('一个模板只能生成一条分享语')
        return false
      }
      this.shareLanguage = item
      this.dialogFormVisible = true
      this.dialogShare.isShow = true
    },
    // 取消分享语
    cancel() {
      this.dialogShare.isShow = false
      this.form.name = ''
    },
    // 确定
    confirm() {
      if (this.form.name !== '') {
        this.shareLanguage.shareSign = this.form.name
      } else {
        this.shareLanguage.shareSign = '暂无'
      }
      this.dialogShare.isShow = false
    },
    // 新增上传作品按钮
    getWorksBtn(url) {
      this.$nextTick(() => {
        this.activityInfo.uploadWorksButton = url
        this.activityInfoRules.activityBtn = url
      })
    },
    // 新增集赞按钮
    getCollectionPraiseBtn(url) {
      this.$nextTick(() => {
        this.activityInfo.praiseButton = url
        this.activityInfoRules.activityBtn = url
      })
    },
    // 删除海报模板素材
    delTemplate(index) {
      this.posterTemplateMaterial.splice(index, 1)
    },
    // 删除分享语
    delShare(item) {
      item.shareSign = '暂无'
    },
    // 删除上传作品按钮
    delWorksBtn() {
      this.activityInfo.uploadWorksButton = ''
    },
    // 删除集赞按钮
    delPraiseBtn() {
      this.activityInfo.praiseButton = ''
    },
    // selectBox(value, val, index, item, secondIndex) {
    //   this.channels[index].secondChannel[secondIndex].selected = value
    //   this.isSelect = value
    //   this.activityInfoRules.intakeChannels = item.name
    // },
    // 选择上下架时间
    selectTime(item, index) {
      this.posterTemplateMaterial[index].upFrameTime = item.setTime[0]
      this.posterTemplateMaterial[index].downFrameTime = item.setTime[1]
    },
    sortInput(item) {
      let reg = /[^\d]/g
      if (reg.test(item.sortNum)) {
        this.$message.warning(`只能输入数字，最大为正整数99`)
        return
      }
    },
    // 编辑一建复制回显
    searchActive() {
      getPosterDetail(this.postId, (res) => {
        if (res) {
          this.activityStatus = res.activityStatus
          this.activityInfo = res
          this.activityInfo.inviteMatchingChannel.twoLevelChannelName = res.inviteMatchingChannel.twoLevelChannelName
          // 校验活动按钮
          this.activityInfoRules.activityBtn = res.uploadWorksButton
          this.activityInfoRules.activityBtn = res.praiseButton
          // this.activityInfoRules.intakeChannels = res.channels
          // this.tableData = res.channels
          let content = res.ruleContent.replace(/<[^>]+>/g, '')
          this.nowLength = content.length
          // this.channels = res.channels

          this.$set(this.activityInfo, 'activityTime', [
            res.activityStartTime,
            res.activityEndTime
          ])
          this.$set(
            this,
            'posterTemplateMaterial',
            this.activityInfo.posterTemplateMaterial
          )
          res.posterTemplateMaterial.forEach((ele, index) => {
            if (this.activityInfo.posterTemplateMaterial[index].upFrameTime) {
              this.$set(ele, 'setTime', [
                this.activityInfo.posterTemplateMaterial[index].upFrameTime,
                this.activityInfo.posterTemplateMaterial[index].downFrameTime
              ])
            }
            // 校验海报模板素材
            this.activityInfoRules.posterTemplate = this.posterTemplateMaterial[
              index
            ].templateImg
          })
        }
      })
    },
    /*文字、图片等，从别处复制而来，清除自带样式，转为纯文本*/
    handleCustomMatcher(node, Delta) {
      if (this.clearStyle) {
        let ops = []
        Delta.ops.forEach((op) => {
          if (op.insert && typeof op.insert === 'string') {
            ops.push({
              insert: op.insert
            })
          }
        })
        Delta.ops = ops
        return Delta
      } else {
        return Delta
      }
    },
    setImgInfo(ary) {
      // 获取富文本组件实例
      let quill = this.$refs.text.quill
      if (ary) {
        // 插入图片，res为服务器返回的图片链接地址
        for (let item of ary) {
          quill.insertEmbed(this.editorIndex++, 'image', item.url)
        }
        // 调整光标到最后
        quill.setSelection(this.editorIndex)
      }
    },
    //计算富文本编辑器，当前输入的字数
    onEditorChange(event) {
      let value = event.quill.getText()
      this.activityInfo.textContent = value
      if (this.activityInfo.ruleContent === '') {
        this.nowLength = 0
      } else {
        this.nowLength = value.length - 1
      }
      this.overText = this.nowLength > this.maxLen ? true : false
      if (this.overText) {
        this.$message.warning(`内容不超过${this.maxLen}字`)
      }
    },
    onEditorBlur(event) {},
    // 取消
    onCancel() {
      this.clearTag()
    },
    // 提交
    onSubmit() {
      // let secondChannel =[]
      //  this.channels.forEach(item => {
      //   item.secondChannel.forEach(items => {
      //      if (items.selected) {
      //        secondChannel.push(items.selected)
      //      }
      //    })
      //  })
      if (this.activityInfo.inviteMatchingChannel.twoLevelChannelName.length == 0) {
        this.$message.warning('展翅入量二级渠道不能为空')
        return false
      }
      if (!this.showChannelIcon) {
        this.$message.warning('展翅入量二级渠道错误')
        return false
      }
      let ids = []
      let templateImg = []
      let setTime = []
      this.posterTemplateMaterial.forEach(element => {
        if (element.sortNum) {
          ids.push(Number(element.sortNum))
        }
        templateImg.push(element.templateImg)
        if (element.upDownFrameStatus==='OPEN') {
          setTime.push(element.upFrameTime)
        }
      })
      if (templateImg.includes('')) {
        this.$message.warning(`海报模板素材不能为空`)
        return false
      }
      if (setTime.includes(null)) {
        this.$message.warning(`时间不能设置为空`)
        return false
      }
      if (setTime.includes(undefined)) {
        this.$message.warning(`时间不能设置为空`)
        return false
      }
      if (setTime.includes('')) {
        this.$message.warning(`时间不能设置为空`)
        return false
      }
      const idsSet = new Set(ids)
      if (ids.length > 1 ) {
        if ([...idsSet].length !== ids.length) {
          this.$message.warning(`模板排序不能相同`)
          return false
        }
      }      
      if (this.nowLength > 500) {
        this.$message.warning(`内容不超过${this.maxLen}字`)
        return
      }
      let check = / /g
      if (check.test(this.activityInfo.textContent)) {
        this.$message.warning(`内容包含特殊字符`)
        return
      }
      this.$refs['activityInfo'].validate((valid) => {
        if (!valid) {
          this.$message.warning('请检查必填项')
        } else {
          if (!this.activityInfo.activityName) {
            this.$message.warning('活动名称不能为空')
            return false
          } else if (this.activityInfo.activityTime.length == 0) {
            this.$message.warning('活动起止时间不能为空')
            return false
          } else if (!this.activityInfo.activityPoster) {
            this.$message.warning('海报不能为空')
            return false
          } else if (!this.activityInfo.uploadWorksButton) {
            this.$message.warning('新增上传作品按钮不能为空')
            return false
          } else if (!this.activityInfo.praiseButton) {
            this.$message.warning('新增集赞按钮不能为空')
            return false
          }
          if (this.$route.query.type == 'copy') {
            getPostersName(this.activityInfo.activityName, (res) => {
              if (res) {
                this.$message.error('活动名称重复!!!请重新填写或修改')
                return false
              } else {
                // this.channels.forEach((item) => {
                //   for (let i = 0; i < item.secondChannel.length; i++) {
                //     if (!item.secondChannel[i].selected) {
                //       item.secondChannel.splice(i, 1)
                //       i--
                //     }
                //   }
                // })
                // this.channels = this.channels.filter((item) => {
                //   return item.secondChannel.length > 0
                // })
                let obj = Object.assign(
                  this.activityInfo,
                  {
                    posterTemplateMaterial: this.posterTemplateMaterial
                  },
                  // {
                  //   channels: this.channels
                  // }
                )
                addPoster(
                  obj,
                  (res) => {
                    this.clearTag()
                  },
                  (err) => {
                    this.$message({
                      message: err.message,
                      type: 'warning'
                    })
                  }
                )
              }
            })
          } else {
            // this.channels.forEach((item) => {
            //   for (let i = 0; i < item.secondChannel.length; i++) {
            //     if (!item.secondChannel[i].selected) {
            //       item.secondChannel.splice(i, 1)
            //       i--
            //     }
            //   }
            // })
            // this.channels = this.channels.filter((item) => {
            //   return item.secondChannel.length > 0
            // })
            let obj = Object.assign(
              this.activityInfo,
              {
                posterTemplateMaterial: this.posterTemplateMaterial
              }
              // {
              //   channels: this.channels
              // }
            )
            if (this.$route.query.type == 'add') {
              addPoster(
                obj,
                (res) => {
                  this.clearTag()
                },
                (err) => {
                  this.$message({
                    message: err.message,
                    type: 'warning'
                  })
                }
              )
            } else {
              changePoster(
                this.postId,
                obj,
                (res) => {
                  this.clearTag()
                },
                (err) => {
                  this.$message({
                    message: err.message,
                    type: 'warning'
                  })
                }
              )
            }
          }
        }
      })
    }
  },
  watch: {
    'activityInfo.activityTime': {
      handler(newV, oldV) {
        if (newV == null) {
          this.activityInfo.activityStartTime = ''
          this.activityInfo.activityEndTime = ''
        } else {
          this.activityInfo.activityStartTime = newV[0]
          this.activityInfo.activityEndTime = newV[1]
        }
      }
    },
    'activityInfo.inviteMatchingChannel.twoLevelChannelName': {
      handler(newV, oldV) {
        if (newV) {
          this.getChannelVerificationList()
        }
      }
    },
  }
}
</script>
<style lang="less" scoped>
.addPoster-channel {
  display: flex;
  flex-direction: row;
  align-items: center;
  :deep(.el-input__inner) {
    // margin-left: 20px;
    width: 206.5px;
    height: 40px;
  }
  :deep(.el-form-item__content) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

.addPoster-channel-input {
  width: auto !important;
}

.addPoster-channel-icon {
  font-size: 30px !important;
  margin-left: 20px;
}

.addPoster-channel-icon-open {
  color: #409EFF;
}

.addPoster-p {
  display: inline-block;
  margin-left: 200px;
  width: 410px;
}

.poster-template {
  margin-left: 114px;
}
.set-time {
  margin-top: 10px;
}
.active-btn {
  display: flex;
}
.up-pic {
  margin-left: 20px;
}
.collection-pic {
  margin-left: 47px;
  margin-top: 10px;
}
.sorting-box {
  display: flex;
  margin-top: 10px;
}
.sorting {
  width: 50px;
}
.add-share {
  margin-top: 10px;
  margin-bottom: 22px;
}
.poster-pic {
  margin-top: 20px;
}
.activity-input {
  width: 300px;
}
.tip {
  margin-left: 50px;
  color: #f00;
}
.submit-wrap {
  margin: 20px 20px 30px 550px;
}
.quill-editor {
  .ql-container {
    height: calc(100vh - 162px);
    .ql-editor {
      height: calc(~'100% - 30px');
    }
  }
}
.limit {
  height: 30px;
  line-height: 30px;
  text-align: right;
  margin: -30px 0 10px;
  padding-right: 10px;
  span {
    color: #f00;
  }
}
.delbtn {
  float: right;
  margin-right: 400px;
}
.poster-share {
  overflow: hidden;
  margin-top: 10px;
}
.share-text {
  float: left;
}
.delshare {
  float: left;
  margin-left: 20px;
}
.red-note {
  position: absolute;
  bottom: -23px;
  padding-left: 800px;
  color: #f00;
}
</style>
